<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <script type="text/javascript" src="${ctx}/appjs/ticket/tenantTicketType.js"></script>
    <style>
        body {
            /*overflow: hidden !important;*/
        }

        .seach-box {
            height: 200px;
            border: 1px solid #eee;
            padding-left: 15px;
            padding-top: 10px;
            margin-top: 10px;
        }

        .connectivity_inner_seach, .connectivity_seach {
            padding-left: 0;
            padding-top: 0px;
            overflow: auto;
        }

        .seach-box ul {
            height: 100%;
            width: 100%;
            overflow: auto;
        }

        .seach-box ul li {
            padding-top: 3px;
            display: flex;
        }

        .layui-form-checkbox i {
            height: 30px;
        }

        .layui-checkbox-disbaled span {
            background-color: #5FB878 !important;
        }

        .hide {
            display: none !important;
        }
    </style>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>卡劵列表</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>新增卡券</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">新增卡券</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <form class="form-horizontal m-t layui-form" id="frmTenantTicketType">
                        <input type="hidden" name="ticketTypeId" id="ticketTypeId" value="">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">卡券名称：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" autocomplete="off" id="ticketName"
                                       name="ticketName">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">卡劵类型：</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="ticketSuitType" lay-filter="ticketSuitType" id="ticketSuitType">
                                    <option value="0">充电减免</option>
                                    <option value="1">服务费减免</option>
                                    <option value="2">充电满折</option>
                                    <option value="3">服务费满折</option>
                                    <option value="4">代金券</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">发放方式：</label>
                            <div class="col-sm-3">
                                <input type="radio" class="form-control" name="ticketSource" lay-filter="ticketSource" value="0" title="系统发放" checked>
                                <input type="radio" class="form-control" name="ticketSource" lay-filter="ticketSource" value="1" title="主动领取">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">发放时间：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="sendDate" name="sendDate">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">使用条件(满减多少可用)：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="useRequireAmount" name="useRequireAmount">
                            </div>
                            <div class="col-sm-2 layui-form-mid layui-word-aux">元</div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">有效期：</label>
                            <div class="col-sm-3">
                                <input type="radio" class="form-control" checked name="effectType" lay-filter="effectType" title="获取后" value="0">
                                <input type="radio" class="form-control" name="effectType" lay-filter="effectType" title="在日期" value="1">
                            </div>
                        </div>
                        <div class="form-group row gainDiv ">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-1">
                                <input type="checkbox" checked disabled title="获取后">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="effectDay" name="effectDay">
                            </div>
                            <div class="col-sm-2 layui-form-mid layui-word-aux">天内有效</div>
                        </div>
                        <div class="form-group row dateDiv hide">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-1">
                                <input type="checkbox" checked disabled title="在日期">
                            </div>
                            <div class="col-sm-2"><input id="effectStartDate" name="effectStartDate" type="text"
                                                         class="form-control" placeholder="开始时间"></div>
                            <div class=" layui-form-mid layui-word-aux " style="text-align: center;margin-right: 0">-
                            </div>
                            <div class="col-sm-2"><input id="effectEndDate" name="effectEndDate" type="text"
                                                         class="form-control" placeholder="结束时间"></div>
                            <div class="col-sm-3 layui-form-mid layui-word-aux">日期范围内有效(空为不限制时间用时)</div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">优惠方式：</label>
                            <div class="col-sm-3">
                                <input type="radio" class="form-control" checked name="discountType" lay-filter="discountType" value="0" title="立减">
                                <input type="radio" class="form-control" disabled name="discountType" lay-filter="discountType" value="1" title="打折">
                            </div>
                        </div>
                        <div class="form-group row reductionDiv">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-1">
                                <input type="checkbox" checked disabled title="立减">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" name="discountAmount">
                            </div>
                            <div class="col-sm-1 layui-form-mid layui-word-aux">元</div>
                        </div>
                        <div class="form-group row discountDiv hide">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-1">
                                <input type="checkbox" checked disabled title="打折">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" name="discount">
                            </div>
                            <div class="col-sm-1 layui-form-mid layui-word-aux">折(0~1)</div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">发放总数：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="totalTicket" name="totalTicket">
                            </div>
                            <%--                            <input type="checkbox" name="isMax" id="isMax" title="无限制" value="1" lay-filter="isMax">--%>
                            <%--                            <div class="col-sm-3">--%>
                            <%--                                <p class="couponTips layui-word-aux">*优惠券的总数,用完该优惠券不能继续发放.</p>--%>
                            <%--                            </div>--%>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">领取次数：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="ticketUnitCount" name="ticketUnitCount">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">用户类型：</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="applianceUser" lay-filter="applianceUser" id="applianceUser">
                                    <option value="0" selected>全部用户</option>
                                    <option value="1">新用户</option>
                                    <option value="9">等级会员</option>
                                    <option value="10">企业用户</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row" id="memberLevelId">
                            <label class="col-sm-3 col-form-label text-right">会员等级：</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="applicnceLevel" id="applicnceLevel">
                                    <option value="">请选择(用户类型为等级会员时有效)</option>
                                    <c:forEach items="${levelMap}" var="level">
                                        <option value="${level.key}">${level.value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row" style="display: none;" id="enterpirseLevelId">
                            <label class="col-sm-3 col-form-label text-right">企业等级：</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="applicnceLevel" id="enterpirseId">
                                    <option value="">请选择</option>
                                    <c:forEach items="${enterLevels}" var="enterLevel">
                                        <option value="${enterLevel.enterpriseLevel}">${enterLevel.levelName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <%--                        <div class="form-group row">--%>
                        <%--                            <label class="col-sm-3 col-form-label text-right">使用范围：</label>--%>
                        <%--                            <div class="col-sm-1">--%>
                        <%--                                <input type="radio" class="form-control" name="AvailableRange" lay-filter="AvailableRange" value="0" title="全部" checked>--%>
                        <%--                            </div>--%>
                        <%--                            <div class="col-sm-1">--%>
                        <%--                                <input type="radio" class="form-control" name="AvailableRange" lay-filter="AvailableRange" value="1" title="指定">--%>
                        <%--                            </div>--%>
                        <%--                        </div>--%>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">与其他优惠折扣不能同时使用：</label>
                            <div class="layui-input-block">
                                <input type="checkbox" id="ticketExclusivity" value="0" class="form-control" lay-skin="switch"  name="ticketExclusivity" lay-text="启用|禁用" lay-filter="ticketExclusivity">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">卡劵说明：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="remark" name="remark">
                            </div>
                        </div>


                        <div class="form-group row" style="align-items: baseline">
                            <label class="col-sm-3 col-form-label text-right">使用范围：</label>
                            <div class="col-sm-6 layui-form-mid layui-word-aux">*勾选对应站点，才能在对应的站点进行使用</div>
                        </div>
                        <div class="form-group row" style="align-items: baseline">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-2" style="margin-top: 10px">
                                <div class="checkallbox">
                                    <input lay-skin="primary" type="checkbox" id="self_checkall" name="type"
                                           lay-filter="self_allChoose" value="checkall"/><span>全部</span></div>
                                <div class="seach-box self_seach">
                                    <ul></ul>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3 col-sm-offset-8 text-right">
                                <%--<button type="button" class="btn btn-primary" onclick="addTenantTicketType.init()">提交</button>--%>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        layui.use(['form'], function () {
            var form = layui.form;
            form.on('switch(ticketExclusivity)',function (data) {
                //开关是否开启，true或者false
                var checked = data.elem.checked;

                if(checked) {
                    $("#ticketExclusivity").val("1");
                } else {
                    $("#ticketExclusivity").val("0");
                }
                //获取所需属性值
                // var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue;
                //TODO 此时进行ajax的服务器访问，如果返回数据正常，则进行后面代码的调用
                // var serverStatus = 1;
                // if(serverStatus){
                //     data.elem.checked = checked;
                // }else {
                //     data.elem.checked = !checked;
                // }
                // form.render();
            });
            form.on('select(ticketSuitType)',function(data){
                // console.info("data",JSON.stringify(data))
                var value = data.value;
                if(value==0 || value==1 || value==4){//减免优惠券
                    $("input[type=radio][name='discountType']:eq(0)").attr("disabled",false);
                    $("input[type=radio][name='discountType']:eq(0)").next().removeClass('layui-radio-disabled');
                    $("input[type=radio][name='discountType']:eq(1)").attr("disabled",true);
                    $("input[type=radio][name='discountType']:eq(1)").next().addClass('layui-radio-disabled');
                    $("input[name='discountAmount']").parent().parent().removeClass('hide');
                    $("input[name='discount']").parent().parent().addClass('hide');
                }else if(value==2 || value==3){//打折优惠券
                    $("input[type=radio][name='discountType']:eq(0)").attr("disabled",true);
                    $("input[type=radio][name='discountType']:eq(0)").next().addClass('layui-radio-disabled');
                    $("input[type=radio][name='discountType']:eq(1)").attr("disabled",false);
                    $("input[type=radio][name='discountType']:eq(1)").next().removeClass('layui-radio-disabled');
                    $("input[name='discountAmount']").parent().parent().addClass('hide');
                    $("input[name='discount']").parent().parent().removeClass('hide');
                }
                $("input[type=radio][name='discountType']").each(function(index, el) {
                    var radioVal = $(el).val();
                    if((value==0 || value==1 || value==4) && radioVal==0){
                        el.checked= true;
                    }else if((value==2 || value==3) && radioVal==1){
                        el.checked= true;
                    }else{
                        el.checked= false;
                    }
                })
                form.render('radio');
            });

            form.on('select(applianceUser)', function (data) {
                if(data.value =='10'){
                    $("#enterpirseLevelId").show();
                    $("#memberLevelId").hide();
                    $("#userId").val("");
                }else{
                    $("#memberLevelId").show();
                    $("#enterpirseLevelId").hide();
                    $("#enterpriseId").val("");
                }
            });
            listTicketStation();
            form.render('checkbox');
        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var startTime = laydate.render({
                elem: '#effectStartDate',
                position: 'fixed',
                type: 'date',
                format: 'yyyy-MM-dd',
                trigger: 'click',
                done: function (value, dates) {
                    endTime.config.min = {
                        year: dates.year,
                        month: dates.month - 1, //关键
                        date: dates.date,
                        hours: 0,
                        minutes: 0,
                        seconds: 0
                    };
                }
            });
            var endTime = laydate.render({
                position: 'fixed',
                elem: '#effectEndDate',
                type: 'date',
                format: 'yyyy-MM-dd',
                trigger: 'click'
            });

            var nowDate = new Date();
            var sendDate = laydate.render({
                position: 'fixed',
                elem: '#sendDate',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss',
                mini: nowDate.toLocaleString(),
                trigger: 'click'

            });

        });

        addTenantTicketType.init();

        layui.use(['form', 'jquery', 'tree', 'laydate', 'util'], function () {

            var form = layui.form;
            var $ = layui.jquery;

            //是否启用余额提现功能
            form.on("checkbox(isMax)", function (data) {
                var isMax = $("[name='isMax']").is(":checked")
                if (isMax) {
                    $('#totalTicket').val("")
                    $('#totalTicket').attr("disabled", "disabled");
                } else {
                    $('#totalTicket').removeAttr("disabled");
                }
            });


        })


        //获取自营/非自营/互联互通外部桩群
        function listTicketStation() {
            $.ajax({
                cache: false,
                type: "POST",
                url: prefix + "/listTicketStation",
                data: {
                    "ticketTypeId": $("#ticketTypeId").val()
                },
                // processData: false,
                // contentType: false,
                async: false,
                error: function (request) {
                    parent.layer.alert("Connection error");
                },
                success: function (data) {
                    console.log(data)
                    var str1 = '';
                    var str2 = '';
                    var str3 = '';
                    var str4 = '';
                    for (var i = 0; i < data.data.length; i++) {
                        if (data.data[i].hlhtOperatorId == null) {//是否互联互通内部桩群，0是，null不是
                            str1 += `<li><input lay-skin="primary" type="checkbox" class="elecStationId" lay-filter="self_list" value="\${data.data[i].elecStationId}"/><span>\${data.data[i].stationName}</span></li>`

                            /*if (data.data[i].bizType == "0") {//0自营
                                                    } else if (data.data[i].bizType == "1") {//1非自营
                                str2 += ` <li><input lay-skin="primary" type="checkbox" class="elecStationId" lay-filter="unSelf_list" value="\${data.data[i].elecStationId}"/><span>\${data.data[i].stationName}</span></li>`
                            }*/
                        }
                        // else {//互联互通外部
                        //     str3 += `<li><input lay-skin="primary" type="checkbox" class="elecStationId" lay-filter="connectivity_list" value="\${data.data[i].elecStationId}"/><span>\${data.data[i].stationName}</span></li>`
                        // }
                    }
                    $(".self_seach ul").append(str1);
                    $(".unSelf_seach ul").append(str2);
                    // $(".connectivity_seach ul").append(str3);
                }
            });
        }

        //上传图片
        $("#file").change(function () {
            var objUrl = getObjectURL(this.files[0]);//获取文件信息
            if (objUrl) {
                $("#ticket_img1").attr("src", objUrl);
            }
        });

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        $("body").scroll(function () {//监听滚动事件关闭控件
            $(".layui-laydate").css("display", "none")
        })

    </script>
</div>
</body>
</html>
